<template>
  <div id="app">
    <A>
      <!-- 默认插槽 -->
      <p>这是往A中插入的</p>
      <span>{{ count }}</span>
    </A>
    <!-- 命名插槽 -->
    <B>
      <template v-slot:b>
        <header>header</header>
      </template>
      <!--  -->
      <button @click="count++">点击+1</button>
      <footer>footer</footer>
    </B>
    <!-- 作用域插槽 -->
    <C>
      <!-- 这个可以接受子组件中传递过来的数据 -->
      <template #header="slotScoped">
        <header>header 打印 ：{{ slotScoped.sex }}</header>
      </template>
      <!-- 默认插槽可以使用v-slot 解构传递过来的数据 -->
      <template v-slot="{ sex }">
        <header>footer 打印 ：{{ sex }}</header>
      </template>
    </C>
  </div>
</template>

<script>
import A from "./A.vue";
import B from "./B.vue";
import C from "./C.vue";

export default {
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
  components: {
    A,
    B,
    C,
  },
};
</script>

<style>
</style>
